<template>
  <div class="frameContainers">
    <header
      class="headNav"
      :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
    >
      <section class="headArea" :style="{ height: headAreaHeight + 'px', marginTop: headAreaMarTop + 'px' }">
        <div class="big">
          <div class="content" @click="goHome">
            <image :src="turn" class="turn"></image>
          </div>
          <p class="book">{{message}}</p>
        </div>
      </section>
    </header>
  </div>
</template>

<script>
  import app from "./../App";

  export default {
    name: "navbarWord",
    data() {
      return {
        pixelRatio: app.getSysInfo().pixelRatio, //系统像素比
        statusBarHeight: app.getSysInfo().statusBarHeight, //系统状态栏高度
        navHeight: "", //顶部导航栏高度
        headAreaHeight: app.getSysInfo().pixelRatio * 35 / app.getSysInfo().pixelRatio, //顶部内容区域高度
        headAreaMarTop: "", //顶部内容区域外边距
        headleftBoxW: "", //顶部内容左侧区域外边距
        headRightBoxW: "", //顶部内容右侧区域外边距
        containersHeight: "", //页面内容区域高度
        turn:'/static/images/navbarTurn.png',
      }
    },
    props:{
      message:String
    },
    mounted() {
      //IOS 与 安卓进行差异化处理
      if (app.getSysInfo().system.substring(0, 3) == "iOS") {
        this.navHeight = this.pixelRatio * 40 / this.pixelRatio;
        this.headAreaMarTop = this.pixelRatio * 0.5 / this.pixelRatio;
        this.headleftBoxW = app.getSysInfo().windowWidth - this.pixelRatio * 100 / this.pixelRatio;
        this.headRightBoxW = this.pixelRatio * 100 / this.pixelRatio;
        this.containersHeight = app.getSysInfo().windowHeight - (this.statusBarHeight + this.pixelRatio * 40 / this.pixelRatio);
      } else {
        this.navHeight = this.pixelRatio * 45 / this.pixelRatio;
        this.headAreaMarTop = this.pixelRatio * 2.5 / this.pixelRatio;
        this.headleftBoxW = app.getSysInfo().windowWidth - this.pixelRatio * 110 / this.pixelRatio;
        this.headRightBoxW = this.pixelRatio * 110 / this.pixelRatio;
        this.containersHeight = app.getSysInfo().windowHeight - (this.statusBarHeight + this.pixelRatio * 45 / this.pixelRatio);
      }
      this.$emit('func', this.statusBarHeight);
      this.$emit('func1', this.navHeight);
      this.$emit('func2', this.containersHeight);
    },
    methods:{
      goHome(){
        wx.navigateBack({})//返回上一页
      }
    }
  }
</script>

<style scoped>
  .frameContainers {
    position: fixed;
    top: 0px;
    z-index: 100;
    left: 0;
    right: 0;
  }

  .book {
    margin-left: 110px;
    width:64px;
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(0,0,0,1);
    line-height:22px;
  }

  .big {
    display: flex;
    flex-direction: row;
  }



  .headNav {
    background-color: white;
    display: flex;
    align-items: center;
  }

  .headArea {
    width: 100%;
    background-color: white;
  }
  .turn{
    margin-top: 6px;
    margin-left: 16px;
    width:8px;
    height:16px;
  }
  .content{
    margin-left: 8px;
    width: 32px;
    height: 32px;
  }
</style>
